<template>
  <!-- 拟招标内容明细 -->
  <div id="detailCon" class="con">
    <div class="e-table">
      <div class="top">
        <div class="left">
          <div>
            <router-link to="/yearNeedPlanAdd">
              <el-button size="small" style="background: #7aa818; color: #fff"
                >新增</el-button
              >
            </router-link>
          </div>
        </div>
        <div class="right">
          <div class="right-div1">
                <el-input placeholder="" size="small" v-model="pagination.keyWord"  @keydown.enter.native="fuzzySearchEnter" @blur="likeSearch">
                            <i slot="suffix" class="el-icon-search like" @click="likeSearch"></i>
                        </el-input>
          </div>
          <div>
            <el-button size="small" style="background: #2e61d7; color: #fff"
              @click="onAdvanceSearch"
              >高级搜索</el-button
            >
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :height="tableHeight"
        class="table"
        ref='table'
        v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
      >
        <el-table-column fixed label="计划编号" min-width="250">
            <template slot-scope="scope">
                <span  class="a" @click="tableDbShow(scope.row)">{{scope.row.billNo}}</span>
            </template>
        </el-table-column>

        <el-table-column prop="purchaseType" label="采购类型" width="100">
          <template slot-scope="{row}">
            <span>
                {{
                  row.purchaseType===0?'普通采购':'集中采购'
                }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="planDate" label="计划日期" width="150">
        </el-table-column>
        <el-table-column prop="year" label="计划年度" width="150">
        </el-table-column>
        <el-table-column prop="amount" label="计划金额" width="150">
        </el-table-column>
         <el-table-column
            prop="state"
            label="状态"
            width="100"
        >
            <template slot-scope="scope">
            <ToolHistory v-if="scope.row.state == '1'" :key="scope.$index" url="/turnover/audit/getAuditHistory" :billId="scope.row.billId" :billType="60851">
                    <span   v-status="scope.row.state">
                        {{["草稿", "审核中", "已审核", "已关闭",'', "已作废"][scope.row.state]}}
                    </span>
                </ToolHistory>
                <span v-else  v-status="scope.row.state">
                    {{["草稿", "审核中", "已审核", "已关闭",'', "已作废"][scope.row.state]}}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="orgName" label="机构" min-width="250">
        </el-table-column>
        <el-table-column
          label="变更状态"
          width="100"
        >
            <template slot-scope="scope">
                <span>{{scope.row.changedState===-1?" ":statusLable(scope.row.changedState)}}</span>
            </template>

        </el-table-column>

      </el-table>
   <ComPagination
                :total="totalPage"
                :pageSize.sync="pagination.limit"
                :currentPage.sync="pagination.page"
                @currentChange="contractListByEntity"
                @sizeChange="contractListByEntity"
                :class="{ bottomSetting }"
            />
    </div>
  </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination'
import { vueDom, debounce, advanceSearch } from '@/utils/common.js'
import auditRequest from '@/api/turnover/audit.js'

export default {
    components: {
        ComPagination
    },
    data () {
        return {
            tableHeight: 0,
            fn: null,
            dialogVisibleSearch: false,
            tableData: [],

            pagination: {
                limit: 20,
                number: '',
                orgname: '',
                page: 1,
                'keyWord': '',
            },
            totalPage: null,
            bottomSetting: true,
            MouseEnterId: 0,
            stateArr: ['草稿', '审核中', '已审核', '已作废'],
            auditParams: {
                billId: this.$route.query.billid,
                billType: 60851,
                freeNextUnitIndex: 0,
                freeNextUser: '',
                isPass: true,
                isShareInAudit: true,
                opinion: ''
            },
        }
    },
    computed: {
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value == param)
                if(obj !== undefined) {
                    return obj.label
                }
            }
        },

    },
    created () {
        this.getTableData()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.documentElement.clientHeight - 170 || document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.documentElement.clientHeight - 170 ||  document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        getTableData () {
            this.$Ajax
                .httpPost({
                    url: '/turnover/annualDemandPlan/listByEntity',
                    params: this.pagination,
                })
                .then(res => {
                    this.tableData = res.list
                    this.totalPage = res.totalCount
                })
        },
        /**
         * 高级搜索
         */
        onAdvanceSearch () {
            advanceSearch('/revolveSearch').then(res=>{
                this.pagination.search = res
                this.getTableData()
            })
        },
        //分页查询
        contractListByEntity () {
            this.getTableData()
        },
        //点击查看的时候
        clickEdit (id) {
            this.$router.push({ path: '/yearNeedPlanEdit', query: { billid: id } })
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        //回车键查询
        fuzzySearchEnter (e) {
            if(e.keyCode == 13) {
                this.getTableData()
            }
        },
        //模糊查询
        likeSearch () {
            this.getTableData()
        },
        //点击进入查看页面
        tableDbShow (row) {
            const billid = row.billId

            if(row.state === -1 || row.state === 2 || row.state === 5) {
                this.$router.push({
                    path: '/yearNeedPlanShow',
                    query: { billid }
                })
            }else{
                this.auditParams.billId = row.billId

                // 根据按钮状态来判断点击编辑进什么页面
                auditRequest.getCurrentUnitInfo(this.auditParams).then(res => {
                    this.auditState = res
                    if( this.auditState.canModify) {
                        this.$router.push({
                            path: '/yearNeedPlanEdit',
                            query: { billid }
                        })
                    }else{
                        this.$router.push({
                            path: '/yearNeedPlanShow',
                            query: { billid }
                        })
                    }
                })

            }
        },

    },
}
</script>
<style lang="scss" scoped>
.e-table {
    min-height: 97.3vh;
}
#iconEdit:hover {
  color: red;
}

.like {
  color: rgb(46, 97, 215);
  font-size: 17px;
  line-height: 30px;
  cursor: pointer;
}
</style>